﻿<template>
  <section>
    <div class="comTitle">
      <span>
        <span v-for="(item, index) in leftList" :key="index">
          <span v-if="item.type == 'text'">{{ item.label }}</span>
          <span
            v-if="item.type == 'button'"
            :class="{ activeTab: activeTab == index }"
            @click="handleChange(index, item.model)"
            >{{ item.label }}</span
          >
        </span>
      </span>
      <span @click="handleRoute(rightObj.path)">
        <el-button type="text" v-if="rightObj.type == 'button'"
          >{{ rightObj.text }}<i :class="`el-icon-arrow-${rightObj.icon}`"></i>
        </el-button>
      </span>
    </div>
  </section>
</template>

<script>
export default {
  name: "comTitle",
  components: {},
  props: {
    leftList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    rightObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  watch: {},
  data() {
    return {
      activeTab: 1,
    };
  },
  mounted() {},
  methods: {
    handleRoute(v) {
      this.$emit("handleRoute", v);
    },
    handleChange(x, y) {
      this.activeTab = x;
      if (y == "/home") {
        this.$router.push(y);
      }
    },
  },
};
</script>

<style scoped lang="less">
.activeTab {
  color: #2f82ff !important;
}
.comTitle {
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > span {
    &:nth-child(1) {
      > span {
        > span {
          margin-left: 35px;
          font-size: 14px;
          color: #777;
          line-height: 22px;
          cursor: pointer;
        }
        &:nth-child(1) {
          > span {
            cursor: auto;
            margin-left: 0;
            font-family: "MicrosoftYaHei-Bold";
            font-size: 16px;
            font-weight: bolder;
            color: #555;
          }
        }
      }
    }
    &:nth-child(2) {
      > button {
        font-size: 12px;
        color: #777;
        &:hover {
          color: #2f82ff;
        }
      }
    }
  }
}
</style>